import React, { useState } from 'react';
import './arrayPolyfills';
import { jsonDiff, useEffectPlus } from './index';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root') as HTMLDivElement);
function Test() {
  const [stateA, setStateA] = useState(0);
  const [stateB, setStateB] = useState(false);
  const [stateC, setStateC] = useState('你好');
  useEffectPlus(
    (records) => {
      const [isFirstUpdate, changeIndexList] = records;
      if (isFirstUpdate) {
        // 如果是第一次执行，不运行后续逻辑
        return;
      }
      if (changeIndexList.includes(0)) {
        // stateA 触发了本次更新
      }
      if (changeIndexList.includes(1)) {
        // stateB 触发了本次更新
      }
      if (changeIndexList.length === 3) {
        // stateA stateB stateC 触发了本次更新
      }
      return () => {
        // 我是副作用清理函数，可选，非必填
      };
    },
    [stateA, stateB, stateC],
  );
  return (
    <div>
      <button
        onClick={() => {
          setStateA((v) => v + 1);
        }}
      >
        点我一下
      </button>
      <button
        onClick={() => {
          setStateB((v) => !v);
        }}
      >
        点我一下
      </button>
      <button
        onClick={() => {
          setStateC((v) => v + '你好');
        }}
      >
        点我一下
      </button>
      <button
        onClick={() => {
          setStateC((v) => v + '你好');
          setStateA((v) => v + 1);
          setStateB((v) => !v);
        }}
      >
        点我一下
      </button>
      <p>{stateA}</p>
      <p>{'' + stateB}</p>
      <p>{stateC}</p>
    </div>
  );
}
root.render(<Test></Test>);

const json1 = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3,
      kk: [1, 2, 3, { a: 33 }],
    },
  },
};

const json2 = {
  a: 10,
  b: {
    c: 2,
    d: {
      f: 4,
      kk: [1, 2, 3, { a: 36 }],
    },
  },
  g: 5,
};
console.log(jsonDiff(json1, json2));
